<!--
 * @Author: Nxf
 * @Date: 2024-06-13 11:57:39
 * @LastEditors: Nxf
 * @LastEditTime: 2024-07-28 23:51:52
 * @Descripttion: 
-->


<template>

    <div class="goodsTblDiv">

        <a-table :columns="columns" :data-source="orderLine" class="goodsTable" @resizeColumn="handleResizeColumn"
            :pagination="false" bordered>
            <template #title>
                <!-- <div class="titleDiv">{{ dest_station_partner.display_name }}进场货物清单</div> -->
                <div class="sloganDiv">飞鸟叮咚 &nbsp;&nbsp;&nbsp;&nbsp; 一件也是批发价</div>
                <div class="titleDiv">飞鸟叮咚送货清单</div>
                <div class="titleInfoDiv">
                    <div class="shrName">
                        收货人:
                        <span>{{ dest_station_partner.id === null ? '' : dest_station_partner.stationName }}</span>
                    </div>
                    <div class="shrTel">
                        收货人电话:
                        <span>{{ dest_station_partner.id ? dest_station_partner.mobile : '' }}</span>
                    </div>
                    <div class="orderNum">
                        订单编号:
                        <span>{{ props.saleOrder.client_order_ref }}</span>
                    </div>
                    <div class="shrAddress">
                        收货地址:
                        <span>{{ dest_station_partner.id ? dest_station_partner.street2 : '' }}</span>
                    </div>
                    <div class="thrName">
                        提货人:
                        <span>{{ customer_partner.id ? customer_partner.display_name : '' }}</span>
                    </div>
                    <div class="thrTel">
                        提货人电话:
                        <span>{{ customer_partner.id ? customer_partner.mobile : '' }}</span>
                    </div>
                </div>
            </template>
            <template #footer>
                <div class="footerDiv">
                    <div class="yhrName">
                        验货人员:
                        <span>{{ }}</span>
                    </div>
                    <div class="psrName">
                        配送人员:
                        <span>{{ }}</span>
                    </div>
                    <div class="fnddSlogan">
                        飞鸟叮咚竭诚为您服务&nbsp;&nbsp;&nbsp;&nbsp;售后热线:0701-3336111
                    </div>
                </div>
                <!-- <div class="footerDiv1">
                    <div>
                        地址:
                        <span>{{ props.saleOrder.company_id.display_name }}</span>
                    </div>
                    <div>
                        售后电话:
                        <span>{{ props.saleOrder.company_id.mobile }}</span>
                    </div>
                    <div></div>
                </div> -->
            </template>
        </a-table>
    </div>

</template>

<script setup>
import { computed, ref } from 'vue'


const props = defineProps({
    saleOrder: {
        default: {}
    }
})
const columns = ref([
    {
        key: 'index',
        title: '编号',
        dataIndex: 'index',
        width: 50,
        // minWidth: 30,
        align: 'center',
        customRender: ({ record, index }) => {
            // console.log('---record, index---', record, index);
            if (index + 1 == orderLine.value.length) {
                return '合计'
            } else {
                return `${index + 1}`;
            }
        }, // 关键句
    },
    {
        key: 'barCode',
        title: '货品条码',
        dataIndex: 'barCode',
        className: 'column-money',
        width: 90,
        // align: 'center',
        resizable: true,
        customCell: (_, index) => {
            return {
                // colSpan: index < 1 ? 1 : 4,
                style: {
                    //可以定义样式
                    // color: 'red',
                    textAlign: 'left'
                },
            };
        },
    },
    {
        key: 'goodsName',
        title: '货品名称',
        dataIndex: 'goodsName',
        width: 500,
        // minWidth: 180,
        // maxWidth: 250,
        resizable: true,
        // align: 'center'
        customCell: () => {
            return {
                style: {
                    //可以定义样式
                    // color: 'red',
                    textAlign: 'left'
                },
            };
        },
        // ellipsis: true,
    },
    {
        key: 'goodsNorms',
        title: '规格',
        dataIndex: 'goodsNorms',
        width: 100,
        align: 'center'
    },
    {
        key: 'goodsUnit',
        title: '单位',
        dataIndex: 'goodsUnit',
        width: 60,
        align: 'center'
    },
    {
        key: 'goodsQuantity',
        title: '采购数量',
        dataIndex: 'goodsQuantity',
        width: 60,
        align: 'center'
    },
    // {
    //     key: 'goodsQuantity',
    //     title: '总计',
    //     dataIndex: 'goodsQuantity',
    //     // width: 60,
    //     align: 'center'
    // },
    // {
    //     key: 'buyingPrice',
    //     title: '供货价',
    //     dataIndex: 'buyingPrice',
    //     // width: 50,
    //     // align: 'center',
    //     customCell: () => {
    //         return {
    //             style: {
    //                 //可以定义样式
    //                 // color: 'red',
    //                 textAlign: 'right'
    //             },
    //         };
    //     },
    // },
    // {
    //     key: 'piecesNum',
    //     title: '件数',
    //     dataIndex: 'piecesNum',
    //     width: 50,
    //     align: 'center'
    // },
    // {
    //     key: 'totalPrice',
    //     title: '总价',
    //     dataIndex: 'totalPrice',
    //     // width: 60,
    //     // align: 'center',
    //     customCell: () => {
    //         return {
    //             style: {
    //                 //可以定义样式
    //                 // color: 'red',
    //                 textAlign: 'right'
    //             },
    //         };
    //     },
    // },
]);
const dest_station_partner = computed(() => {
    console.log('--saleOrder---', props.saleOrder);
    const dest_station_id = props.saleOrder.dest_station_id;
    return {
        ...dest_station_id.partner_id,
        stationName: dest_station_id.display_name
    }
    // const partner_id = props.saleOrder.partner_id;
    // if (dest_station_id.id) {
    //     return dest_station_id.partner_id
    // } else {
    //     return partner_id
    // }
})
const customer_partner = computed(() => {
    console.log('--saleOrder---', props.saleOrder);
    const dest_station_id = props.saleOrder.dest_station_id;
    const partner_id = props.saleOrder.partner_id;
    return partner_id;

    // if (dest_station_id.id) {
    //     return dest_station_id.partner_id
    // } else {
    //     return partner_id
    // }
})
const orderLine = computed(() => {
    const ss = (props.saleOrder.order_line || []).map(sol => {
        return {
            goodsId: sol.product_id.id, //货物ID
            barCode: sol.product_id.barcode, //条码
            goodsName: sol.product_id.name, //货物名称
            // goodsNorms: sol.product_uom.display_name, //货物规格
            goodsUnit: sol.product_uom.display_name || '', //货物单位
            goodsQuantity: sol.product_uom_qty || '', //采购数量
            buyingPrice: sol.price_unit || '', //供货价
            // piecesNum: '', //件数
            totalPrice: sol.price_total || '' //总价
        }
    });
    var allCount = {
        goodsId: '', //货物ID
        barCode: '', //条码
        goodsName: '', //货物名称
        // goodsNorms: '', //货物规格
        goodsUnit: '', //货物单位
        goodsQuantity: totalNum.value, //采购数量
        buyingPrice: '', //供货价
        // piecesNum: '', //件数
        totalPrice: '' //总价
    }
    ss.push(allCount);
    return ss;
    // return [
    //     {
    //         goodsId: '001', //货物ID
    //         barCode: '1795732948155105281', //条码
    //         goodsName: 'B东鹏特饮500ml*24瓶/件 【一件也批发价】	', //货物名称
    //         goodsUnit: '件', //货物单位
    //         goodsQuantity: '10000', //采购数量
    //         buyingPrice: '10', //供货价
    //         totalPrice: '100000' //总价
    //     }
    // ]
});
const totalNum = computed(() => {
    console.log('----props.saleOrder.order_line----', props.saleOrder.order_line);
    let num = 0;
    props.saleOrder.order_line.forEach(goods => {
        num += goods.product_uom_qty
    });
    return num
})
//
function handleResizeColumn(w, col) {
    console.log('---w,col---', w, col);
    col.width = w;
}
</script>
<style lang="less" type="text/less" scoped>
.goodsTblDiv {
    //background: gray;
    width: 100%;
    height: 100%;
    // padding-top: 50px;
    overflow: auto;

    .goodsTable {
        // background: red;
        min-width: 800px;
        max-width: 100%;
        margin: 0 auto;
        // border: 1px solid blue;
        color: #000 !important;
        font-family: Microsoft YaHei !important;

        :deep(.ant-table-title) {
            padding: 0px;
            font-family: Microsoft YaHei !important;
            color: #000 !important;

            .sloganDiv {
                text-align: right;
                // background: rebeccapurple;
                font-size: 24px;
                font-weight: bolder;
                padding-right: 5px;
                padding-top: 5px;
            }

            .titleDiv {
                // background: red;
                height: 80px;
                line-height: 80px;
                font-size: 30px;
                font-weight: bolder;
                text-align: center;
            }

            .titleInfoDiv {
                // background: tan;
                display: flex;
                flex-wrap: wrap;
                height: 90px;
                // line-height: 30px;
                font-size: 19px;
                font-weight: bolder;
                padding-left: 10px;
                // span {
                //     color: gray;
                // }

                .shrName {
                    flex: 0 1 30%;
                    // background: yellow;
                    text-align: left;
                }

                .shrTel {
                    flex: 0 1 30%;
                    text-align: left;
                }

                .orderNum {
                    flex: 0 1 40%;
                    // background: pink;
                    text-align: left;
                }

                .shrAddress {
                    width: 100%;
                    text-align: left;
                    // background: red;
                }

                .thrName {
                    flex: 0 1 30%;
                    // background: blue;
                    text-align: left;
                }

                .thrTel {
                    flex: 0 1 70%;
                    text-align: left;
                }
            }
        }

        .footerDiv {
            display: flex;
            padding-left: 10px;
            font-family: Microsoft YaHei !important;
            color: #000 !important;

            font-size: 17px;
            font-weight: bolder;

            .yhrName {
                flex: 1 1 20%;
                height: 27px;
                line-height: 27px;
                text-align: left;
            }

            .psrName {
                flex: 1 1 30%;
                height: 27px;
                line-height: 27px;
                text-align: left;
            }

            .fnddSlogan {
                flex: 1 1 50%;
                height: 27px;
                line-height: 27px;
                text-align: left;
            }
        }

        .footerDiv1 {
            display: flex;
            justify-content: space-between;
            // padding-left: 5px;

            div {
                flex: 1;
                height: 30px;
                line-height: 30px;
                text-align: left;
                font-size: 19px;
                font-weight: bolder;
                font-family: Microsoft YaHei !important;
                color: #000 !important;
                // span {
                //     color: gray;
                // }
            }
        }

        :deep(.ant-table-thead > tr > th) {
            height: 35px;
            text-align: center;
            font-size: 18px;
            font-weight: bolder;
            border-top: 1px solid black;
            border-left: 1px solid black;
            border-bottom: 1px solid black;
            font-family: Microsoft YaHei !important;
            color: #000 !important;
        }

        :deep(.ant-table-thead > tr > th:last-child) {
            border-right: 1px solid black !important;
        }

        :deep(.ant-table-tbody > tr > td) {
            border-bottom: 1px solid black;
            border-left: 1px solid black;
            font-family: Microsoft YaHei !important;
            color: #000 !important;
        }

        :deep(.ant-table-tbody > tr > td:last-child) {
            border-right: 1px solid black !important;
        }

        :deep(.ant-table-footer) {
            margin: 0px;
            padding: 0px;
        }

        :deep(.ant-table-cell) {
            padding: 0px 3px;
            margin: 0px;
            font-size: 17px;
            font-weight: bolder;
        }
    }
}
</style>
